import React, { use } from 'react';
import './bin.css';
import {useNavigate} from 'react-router-dom'
const MedicalRecordList = () => {
  const navigate=useNavigate()
// 模拟病历数据
const medicalRecords = [
    {
        id: 1,
        date: '05月07日',
        patient: { name: '悦悦', gender: '女', age: '25岁' },
        content: '请做一下CT',
        time: '15:47',
        comments: 3
    },
    {
        id: 2,
        date: '05月07日',
        patient: { name: '悦悦', gender: '女', age: '25岁' },
        content: '核酸检测阴性',
        time: '15:46',
        comments: 3
    },
    {
        id: 3,
        date: '05月07日',
        patient: { name: '悦悦', gender: '女', age: '25岁' },
        content: '发烧！！',
        time: '11:47',
        comments: 3
    },
    {
        id: 4,
        date: '05月06日',
        patient: { name: '蛋蛋', gender: '男', age: '1岁11个月20天' },
        content: '觉得自己长得太帅',
        time: '15:39',
        comments: 1
    }
];

const handleRecordClick=(value)=>{
    console.log(value,43);
    
}
    return (
        <div>
            <div className='big'>
                <h1 onClick={()=>{
                    navigate('/forWork')
                }}>病历</h1>
                <div className="nav-tabs">
                    <span className='ab'>我的病历</span>
                    <span className='bb'>我预约的消息</span>
                </div>
                
                {medicalRecords.map((record) => (
                    <div
                        key={record.id}
                        className="medical-record"
                        onClick={() => handleRecordClick(record)}
                    >
                        <div className="date">
                            {record.date}
                        </div>
                        <div className="patient-info">
                            <span className="patient-name">{record.patient.name}</span>
                            <span className="patient-details">
                                {record.patient.gender} | {record.patient.age}
                            </span>
                        </div>
                        <div className="content">
                            {record.content}
                            {record.content.includes('发烧') && 
                                <span className="urgent">紧急</span>
                            }
                        </div>
                        <div className="record-footer">
                            <span>{record.time}</span>
                            <span className="comments">
                                评论 {record.comments}
                            </span>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default MedicalRecordList;


